<template>
  <div
    ref="dragItemRef"
    :class="['dragItem']"
    :draggable="true"
    @click.stop="isClick = true"
    @dragstart="onDragstart"
    @drag="onDrag"
    @dragend="onDragend"
    :style="{ opacity: isDrag ? 0.8 : 1 }"
  >
    拖拽item
    <!-- 辅助拉伸 -->
    <div
      v-if="isClick"
      ref="leftRef"
      class="assist_stretch_left"
      :draggable="true"
      @dragstart="(e) => onDragstart_stretch(e, 'left')"
      @drag="(e) => onDrag_stretch(e, 'left')"
      @dragend="(e) => onDragend_stretch(e, 'left')"
    ></div>
    <div
      v-if="isClick"
      ref="rightRef"
      class="assist_stretch_right"
      :draggable="true"
      @dragstart="(e) => onDragstart_stretch(e, 'right')"
      @drag="(e) => onDrag_stretch(e, 'right')"
      @dragend="(e) => onDragend_stretch(e, 'right')"
    ></div>
  </div>
</template>

<script setup>
import { computed, inject, ref, watch } from 'vue'

// 父容器点击
let isContainerClick = inject('isContainerClick')

watch(isContainerClick, (val) => {
  if (val) {
    isClick.value = false
  }
})

const props = defineProps({
  width: {
    type: Number,
    default: 0
  },
  height: {
    type: Number,
    default: 0
  },
  x_start: {
    type: Number,
    default: 20
  },
  // 步长
  step: {
    type: Number,
    default: 100
  },
  order: {
    type: Object,
    default: () => {}
  },
  dataMsg: {
    type: Object,
    default: () => {}
  }
})

const emit = defineEmits([
  'x_start_width_changing',
  'x_start_width_change_end',
  'drag_start'
])

// 标识是否点击选中
let isClick = ref(false)
const leftRef = ref(null)
const rightRef = ref(null)
const dragItemRef = ref(null)
let stretch_clientX_start = ref(0)
let stretch_dragging = ref(false)
let drage_width = ref(0)
let drag_x_start = ref(0)
let item_clientX_start = ref(0)
let isDrag = ref(false)

const _width = computed(() => {
  return props.width + 'px'
})

const _height = computed(() => {
  return props.height + 'px'
})

const _x_start = computed(() => {
  return props.x_start + 'px'
})

const onDragstart = (e) => {
  const { offsetX, offsetY, clientX } = e
  item_clientX_start.value = clientX
  e.dataTransfer.setDragImage(e.target, offsetX, offsetY)
  emit('drag_start', props.order)
}

const onDrag = (e) => {
  isDrag.value = true
  const { clientX } = e
  let x = clientX - item_clientX_start.value
  let x_step_num = parseInt(x / props.step)
  drag_x_start.value = props.x_start + x_step_num * props.step
  // emit('x_start_width_changing', [drag_x_start.value, props.width])
  emit(
    'x_start_width_changing',
    {
      ...props.dataMsg,
      x_start: drag_x_start.value,
      width: props.width,
      rowIndex: props.order.rowIndex,
      columnIndex: props.order.columnIndex
    },
    // 拖动
    'drag'
  )
  // dragItemRef.value.style.left = drag_x_start.value + 'px'
}

const onDragend = (e) => {
  isDrag.value = false
  // emit('x_start_width_change_end', [drag_x_start.value, props.width])
  emit(
    'x_start_width_change_end',
    {
      ...props.dataMsg,
      x_start: drag_x_start.value,
      width: props.width,
      rowIndex: props.order.rowIndex,
      columnIndex: props.order.columnIndex
    },
    // 拖动
    'drag'
  )
}

const onDragstart_stretch = (e, type) => {
  // 阻止事件冒泡
  e.stopPropagation()
  stretch_clientX_start.value = e.clientX
  stretch_dragging.value = true
}

const onDrag_stretch = (e, type) => {
  isDrag.value = true
  // 阻止事件冒泡
  e.stopPropagation()
  if (stretch_dragging.value === true) {
    let x = e.clientX - stretch_clientX_start.value
    let x_step_num = parseInt(x / props.step) // 可增加默认步长数
    if (type === 'right') {
      drage_width.value = props.width + x_step_num * props.step
      drag_x_start.value = props.x_start
      // dragItemRef.value.style.width = drage_width.value + 'px'
    } else {
      drage_width.value = props.width - x_step_num * props.step
      drag_x_start.value = props.x_start + x_step_num * props.step
      // dragItemRef.value.style.width = drage_width.value + 'px'
      // dragItemRef.value.style.left =
      //   props.x_start + x_step_num * props.step + 'px'
    }
    // emit('x_start_width_changing', [drag_x_start.value, drage_width.value])
    emit(
      'x_start_width_changing',
      {
        ...props.dataMsg,
        x_start: drag_x_start.value,
        width: drage_width.value,
        rowIndex: props.order.rowIndex,
        columnIndex: props.order.columnIndex
      },
      // 伸展
      'stretch'
    )
  }
}

const onDragend_stretch = (e, type) => {
  isDrag.value = false
  // 阻止事件冒泡
  e.stopPropagation()
  stretch_dragging.value = false
  // emit('x_start_width_change_end', [drag_x_start.value, drage_width.value])
  emit(
    'x_start_width_change_end',
    {
      ...props.dataMsg,
      x_start: drag_x_start.value,
      width: drage_width.value,
      rowIndex: props.order.rowIndex,
      columnIndex: props.order.columnIndex
    },
    // 伸展
    'stretch'
  )
}
</script>

<style lang="scss" scoped>
.dragItem {
  position: absolute;
  top: -1px;
  left: v-bind(_x_start);
  width: v-bind(_width);
  height: v-bind(_height);
  background: #1890ff;
  transition: all 0.2s;
  z-index: 2;
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  box-shadow: 0 0 5px rgba($color: rgb(152, 157, 161), $alpha: 0.8);
  border-radius: 2px;
  border-right: 1px solid #fff;
  padding: 0 2px;
  .assist_stretch_left {
    z-index: 3;
    position: absolute;
    left: -4px;
    top: 50%;
    transform: translateY(-50%);
    width: 8px;
    height: 8px;
    background-color: #fff;
    border: 1px solid #000;
    box-sizing: border-box;
    cursor: w-resize;
  }
  .assist_stretch_right {
    position: absolute;
    right: -4px;
    top: 50%;
    transform: translateY(-50%);
    width: 8px;
    height: 8px;
    background-color: #fff;
    border: 1px solid #000;
    box-sizing: border-box;
    cursor: w-resize;
  }
}
.dragItem:hover {
  z-index: 10 !important;
  transition: all 0.2s;
  border: 1px solid #00d9ff;
}
</style>
